
<!--overflow: hidden  超出隐藏-->
<template>
    <div id="my-element" style="height: 100vh;overflow: hidden;display: flex;justify-content: center;align-items: center; background-color:burlywood">
        <div style="display: flex;background-color: white;opacity:0.94;width: 800px;height: 400px;border-radius: 10px">

            <div style="flex : 1;padding: 50px;opacity:0.9;">
                <img src="@/assets/logo2.jpg" alt="" style="width: 350px;height: 300px;">
            </div>
<!-- : model 用于传递父组件中的数据到子组件，而 v- model 则用于实现双向绑定，将数据在父子组件之间进行同步。
在 Vue.js 中，v-bind 用于绑定 HTML 元素的属性，例如 class、style、src 等等。v-bind 的语法比较繁琐，需要写成 v-bind:class、v-bind:style、v-bind:src 等等。
Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名即可。-->

            <div style="flex : 1; width: 300px;height: 290px;padding-top: 50px;display: flex;align-items: center;padding-left: 20px;margin-top: 20px">
                <el-form :model="userForm" style="width: 80%" :rules="rules" ref="loginRef">
<!--                    。通过给 el-form 添加 ref 属性，你可以在 Vue 组件中通过引用来访问和操作这个表单组件，而不需要通过 DOM 查询或其他方式。-->
<!--                    使用 ref 属性可以在 Vue 组件的 JavaScript 部分直接访问,从而可以进行一系列操作，如表单验证、重置、获取表单数据等。
                       font-weight: bold;加粗-->
                    <div style="font-size: 23px; font-weight: bold; text-align: center; margin-bottom: 20px">登录</div>
                    <el-form-item prop="username">
                        <el-input prefix-icon="el-icon-user" size="medium" placeholder="请输入账号" v-model="userForm.username"></el-input>
                    </el-form-item>
                    <el-form-item  prop="password">
                        <el-input prefix-icon="el-icon-lock" size="medium" show-password placeholder="请输入密码" v-model="userForm.password"></el-input>
                    </el-form-item>

                    <el-form-item  prop="code" >
                        <div style="display: flex">
                            <el-input prefix-icon="el-icon-check"size="medium" placeholder="请输入验证码" style="flex:1" v-model="userForm.code"></el-input>
                            <div style="flex:1">
                               <valid-code @update:value="getCode" style="height: 36px;  "></valid-code>
                            </div>
                        </div>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="danger" plain style="width:100%" @click="Login">登录</el-button>
                    </el-form-item>
<!--                    cursor CSS 属性设置光标的类型（如果有），在鼠标指针悬停在元素上时显示相应样式。-->
                    <div style="display: flex;">
                        <div style="flex: 1;color: grey;font-size: 15px">还未注册？<span style="font-size: 15px;color:#ed6967;cursor: pointer" @click="$router.push('/register')">注册</span> </div>
                        <div style="flex: 1;text-align: right">
                            <span style="color:#ed6967; cursor: pointer"  @click="handForgetPassword">忘记密码</span>
                        </div>
                    </div>
                </el-form>
            </div>
        </div>
        <el-dialog title="忘记密码" :visible.sync="forgetPassDialogVis" width="30%">
            <el-form :model="forgetUserform" label-width="80px" style="padding-right: 20px">
                <el-form-item label="用户名">
                    <el-input v-model="forgetUserform.username" autocomplete="off" placeholder="请输入用户名"></el-input>
                </el-form-item>
                <el-form-item label="手机号">
                    <el-input v-model="forgetUserform.phone" autocomplete="off" placeholder="请输入手机号"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="forgetPassDialogVis = false">取 消</el-button>
                <el-button type="primary" @click="resetPassword">确 定</el-button>
            </div>
        </el-dialog>

    </div>
</template>

<script>
    import ValidCode from "@/components/ValidCode";

    export default {
        name: "Login",
        components:{
                ValidCode
        },
        data(){
            //验证码表单校验 value为表单里面输入的code
            const validateCode = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入验证码'))
                } else if (value.toLowerCase()!= this.code) {
                    callback(new Error('验证码错误'))
                }else {
                    callback();//反馈
                }
            }
            return{
                forgetPassDialogVis:false,//不可见
                code:'',//验证码组件传递过来的code
                userForm:{
                    code:'',//表单里用户输入的code 验证码
                    username:'',
                    password:'',
                },
                forgetUserform:{},
                // trigger: "blur": 失去焦点时触发
                rules: {
                    username: [
                        { required: true, message: '请输入账号', trigger: 'blur' },
                    ],
                    password: [
                        { required: true, message: '请输入密码', trigger: 'blur' },
                    ],
                    // 自定义校验
                    code: [
                           { validator: validateCode, trigger: 'blur' }
            ],
                }
            }
        },methods:{
            handForgetPassword(){//初始化表单
                this.forgetUserform={}
                this.forgetPassDialogVis=true
            },
            resetPassword(){
                this.$request.put('/password',this.forgetUserform).then(res=>{
                    if (res.code==='200'){
                        this.$message.success("重置成功")
                        this.forgetPassDialogVis=false
                    }else{
                        this.$message.error("用户名不存在")
                    }
                })
            },
            getCode(code){
                this.code=code.toLowerCase()
            },
            Login(){
                this.$refs["loginRef"].validate((valid) => {
                    if (valid) {
                        //表单校验通过 requests.post(url,data=data)// 字符串
//                         router.push('home')
//  对象
//                         router.push({ path: 'home' })
//  命名的路由
//                         router.push({ name: 'user', params: { userId: '123' }})
// // 带查询参数，变成 /register?userId=123
//                   router.push({ path: 'register', query: { userId: '123' }})

                        this.$request.post('/login',this.userForm).then(res=>{
                            if (res.code==="200"){
                                this.$router.push('/')
                                this.$message.success('登录成功')
                                localStorage.setItem("honey-user",JSON.stringify(res.data)) //存储用户数据
                            }else {
                                this.$message.error("账号密码错误，请重新输入")
                            }
                        });

                    }

                })

            }
        }
    }
</script>
<style scoped>
    #my-element {
        background: url('../assets/背景22.jpg'); /* 注意相对路径 */
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover; /* 根据需求选择合适的值，比如cover、contain等 */
    }
</style>

